<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Beautiful Colorful Animation with p5.js and Three.js</title>
  <style>
    body {
      margin: 0;
      overflow: hidden;
      background: #000;
    }
    #p5-canvas {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1;
      pointer-events: none;
    }
    #three-container {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 0;
    }
  </style>
</head>
<body>
  <div id="three-container"></div>
  <canvas id="p5-canvas"></canvas>

  <!-- 引入 Three.js 和 p5.js 库 -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.min.js"></script>
  
  <script>
    // Three.js 部分
    let scene, camera, renderer;
    let particles, particleSystem;
    let mouseX = 0, mouseY = 0;
    
    function initThree() {
      // 创建场景
      scene = new THREE.Scene();
      
      // 创建相机
      camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
      camera.position.z = 5;
      
      // 创建渲染器
      renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
      renderer.setSize(window.innerWidth, window.innerHeight);
      renderer.setPixelRatio(window.devicePixelRatio);
      document.getElementById('three-container').appendChild(renderer.domElement);
      
      // 创建粒子系统
      createParticles();
      
      // 添加灯光
      const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
      scene.add(ambientLight);
      
      const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
      directionalLight.position.set(1, 1, 1);
      scene.add(directionalLight);
      
      // 监听窗口大小变化
      window.addEventListener('resize', onWindowResize, false);
      
      // 监听鼠标移动
      document.addEventListener('mousemove', onMouseMove, false);
    }
    
    function createParticles() {
      const particleCount = 2000;
      particles = new THREE.BufferGeometry();
      const positions = new Float32Array(particleCount * 3);
      const colors = new Float32Array(particleCount * 3);
      
      // 初始化粒子位置和颜色
      for (let i = 0; i < particleCount; i++) {
        const i3 = i * 3;
        
        // 随机位置
        positions[i3] = (Math.random() - 0.5) * 20;
        positions[i3 + 1] = (Math.random() - 0.5) * 20;
        positions[i3 + 2] = (Math.random() - 0.5) * 20;
        
        // 彩色粒子
        colors[i3] = Math.random();     // R
        colors[i3 + 1] = Math.random(); // G
        colors[i3 + 2] = Math.random(); // B
      }
      
      particles.setAttribute('position', new THREE.BufferAttribute(positions, 3));
      particles.setAttribute('color', new THREE.BufferAttribute(colors, 3));
      
      // 创建粒子材质
      const particleMaterial = new THREE.PointsMaterial({
        size: 0.1,
        vertexColors: true,
        transparent: true,
        opacity: 0.8
      });
      
      // 创建粒子系统
      particleSystem = new THREE.Points(particles, particleMaterial);
      scene.add(particleSystem);
    }
    
    function onWindowResize() {
      camera.aspect = window.innerWidth / window.innerHeight;
      camera.updateProjectionMatrix();
      renderer.setSize(window.innerWidth, window.innerHeight);
    }
    
    function onMouseMove(event) {
      mouseX = (event.clientX / window.innerWidth) * 2 - 1;
      mouseY = -(event.clientY / window.innerHeight) * 2 + 1;
    }
    
    function animateThree() {
      requestAnimationFrame(animateThree);
      
      // 旋转粒子系统
      particleSystem.rotation.x += 0.001;
      particleSystem.rotation.y += 0.002;
      
      // 鼠标交互
      particleSystem.rotation.y += mouseX * 0.005;
      particleSystem.rotation.x += mouseY * 0.005;
      
      renderer.render(scene, camera);
    }
    
    // p5.js 部分
    let p5Canvas;
    
    function setup() {
      p5Canvas = createCanvas(windowWidth, windowHeight);
      p5Canvas.parent('p5-canvas');
      noStroke();
      fill(255, 100);
    }
    
    function draw() {
      // 半透明背景产生拖尾效果
      background(0, 25);
      
      // 绘制彩色圆圈
      for (let i = 0; i < 5; i++) {
        const alpha = map(sin(frameCount * 0.02 + i), -1, 1, 100, 200);
        fill(
          map(sin(frameCount * 0.01 + i), -1, 1, 100, 255),
          map(sin(frameCount * 0.02 + i), -1, 1, 100, 255),
          map(sin(frameCount * 0.03 + i), -1, 1, 100, 255),
          alpha
        );
        
        const size = map(sin(frameCount * 0.05 + i), -1, 1, 20, 100);
        ellipse(
          width/2 + sin(frameCount * 0.02 + i) * 200,
          height/2 + cos(frameCount * 0.03 + i) * 200,
          size,
          size
        );
      }
      
      // 绘制跟随鼠标的粒子效果
      if (mouseIsPressed) {
        fill(random(100, 255), random(100, 255), random(100, 255), 150);
        ellipse(mouseX, mouseY, random(10, 50), random(10, 50));
      }
    }
    
    function windowResized() {
      resizeCanvas(windowWidth, windowHeight);
    }
    
    // 启动动画
    window.onload = function() {
      initThree();
      animateThree();
    };
  </script>
</body>
</html>
